<template>
  <div class="stats-view">
    <el-card>
      <template #header>
        <span>会议室统计</span>
      </template>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card>
            <div ref="usageChartRef" style="height: 300px;"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div ref="trendChartRef" style="height: 300px;"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

const usageChartRef = ref()
const trendChartRef = ref()

onMounted(() => {
  nextTick(() => {
    initUsageChart()
    initTrendChart()
  })
})

const initUsageChart = () => {
  const chart = echarts.init(usageChartRef.value)
  const option = {
    title: { text: '会议室使用率', left: 'center' },
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [
      {
        name: '使用情况',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 12, name: '总预约' },
          { value: 8, name: '已使用' },
          { value: 4, name: '空闲' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  chart.setOption(option)
}

const initTrendChart = () => {
  const chart = echarts.init(trendChartRef.value)
  const option = {
    title: { text: '预约趋势', left: 'center' },
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: { type: 'value', name: '预约数' },
    series: [
      {
        name: '预约数',
        type: 'line',
        data: [5, 8, 6, 10, 7, 4, 3],
        itemStyle: { color: '#409EFF' }
      }
    ]
  }
  chart.setOption(option)
}
</script>

<style scoped lang="scss">
.stats-view {
  padding: 20px;
}
</style>